<template>
  <div class="tour">
    <SearchBar @search="search" />
    <WaterFall :itemList="searchResult"></WaterFall>
  </div>
</template>

<script>
// @ is an alias to /src
import SearchBar from '@/components/SearchBar.vue'
import WaterFall from '@/components/WaterFall.vue'
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'SearchView',
  components: {
    SearchBar,
    WaterFall,
  },
  setup() {
    const store = useStore();
    let search = () => {
      let list = []
      for (let i = 1; i <= 10; i++) {
        list.push({
          url: `https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302&random=${Math.random()}`,
          title: '中华郡国际旅游度假区',
          sub: '亲子游乐天堂',
          price: '¥40'
        })
      }
      store.commit('setSearchResult', list)
    }

    return {
      searchResult: computed(() => store.state.searchResult),
      search
    }
  }
}
</script>
<style scoped>
.tour {
  height: 100vh;
  overflow-y: scroll;
  background: white;
}
</style>
